<template>
    <div class="common">
        <div v-if="info.isShowFooter" class="top">{{info.title}}</div>
        <slot></slot>
        <div v-if="info.isShowFooter" class="footer">{{info.isShowFooter}}</div>
    </div>
</template>
<script>
export default {
    name:'common',
    data(){
        return{
            info:{
                isShowFooter:true
            }
        }
    },
    watch:{
        str(newVla,oldVal){//简单数据类型监听
            console.log('newVla',newVla)
            console.log('oldVal',oldVal)
        },
        "$route":{//监控路由元信息 只要发生变化就走到handler函数里面
            handler(newVla,oldVal){//监听普通的变量不需要用handler函数, 复杂函数监听  固定命名方法
                console.log('newVla',newVla)
                console.log('oldVal',oldVal)
                this.info = newVla.meta;
                // this.info = Object.assgin(this.info, newVla.meta);//如果每个路由里面都写死了false就不要设这个
            },
            deep:true,//是否深度监听如果监听的是对象就必须添加下面那条
            immediate:true//是否初次监听
        }
    },
    created(){
        console.log('===',this.$route)
        console.log('info=',this.info)
    }
}
</script>
<style scoped lang="scss">
.top{
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    height: 60px;
    box-shadow: 0 0 10px rgb(0, 0, .2);
}
.footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    height: 100px;
    box-shadow: 0 0 10px rgb(0, 0, .2);
}
slot{
    margin-top: 80px;
}
</style>